<template>
	<view class="my-view">
		<view class="user-info" >
			<image  :src="userInfo?userInfo.avatar:'../../static/icon/image_83.png'" mode="" class="user-picture"></image>
			<view class="user-name-id">
				<view class="user-name" v-if="userInfo">
					{{userInfo.nickName}}
				</view>
				<view v-else class="user-name">
					{{$t("my.nologin")}}
				
				</view>
				<view class="user-id"  v-if="userInfo">
					ID：{{userId}}
					<text style="margin-left: 30rpx;">Lv：{{userInfo.userGrade}}</text>
				</view>
			</view>
			<image @tap="goUserInfo" src="../../static/icon/image_44.png" mode="" class="entrance"></image>
		</view>
		<view class="user-function">
			<view class="user-specFunction" v-for="item in userFunctionList" :key="item.id" @tap="goClass(item.id)">
				<view class="user-specFunction-left">
					<image :src="item.imgUrl" mode="" class="user-specFunction-icon"></image>
					{{ item.name }}
				</view>
				<view class="user-specFunction-right">
					<!-- <view class="user-specFunction-inform" v-if="auctionNum && item.id == 1">
						{{ auctionNum }}
					</view> -->
					
					<view class="user-specFunction-inform"  v-if="noticeNum && item.id == 9" >
						{{ noticeNum }}
					</view>
					<image src="../../static/icon/image_44.png" mode="" class="user-specFunction-entrance"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserId, getRecord, getUserInfo, getInform } from "@/common/api.js"

	export default {
		data() {
			return {
				moren:'',
				userFunctionList: [
					{
						id: 1,
						name: this.$t("my.auctionsRecord"),
						imgUrl: "../../static/icon/image_54.png"
					},
					{
						id: 2,
						name: this.$t("my.productReleaseList"),
						imgUrl: "../../static/icon/image_55.png"
					},
					{
						id: 3,
						name: this.$t("my.myOrder"),
						imgUrl: "../../static/icon/image_56.png"
					},
					{
						id: 4,
						name: this.$t("my.wishList"),
						imgUrl: "../../static/icon/image_57.png"
					},
					{
						id: 5,
						name: this.$t("my.addressManagement"),
						imgUrl: "../../static/icon/image_73.png"
					},
					{
						id: 8,
						name: this.$t("home.footPrint"),
						imgUrl: "../../static/icon/image_35.png"
					},
					{
						id: 9,
						name: this.$t("my.notice"),
						imgUrl: "../../static/icon/image_121.png"
					},
					{
						id: 10,
						name: this.$t("my.checkZhEn"),
						imgUrl: "../../static/icon/image_122.png"
					},
					{
						id: 6,
						name: this.$t("my.aboutUs"),
						imgUrl: "../../static/icon/image_58.png"
					},
					{
						id: 7,
						name: this.$t("my.collectionInformationMaintenance"),
						imgUrl: "../../static/icon/image_59.png"
					},
					
				],
				userId: null,
				auctionNum: null,
				noticeNum: null,
				userInfo: {
					avatar:null
				},
			
			}
		},
		methods: {
			// 跳转个人中心
			goUserInfo() {
				uni.navigateTo({
					url: "/pages/userInfo/userInfo"
				})
			},
			goClass(id) {
				switch (id){ 
					case 2:
						uni.navigateTo({
							url: "/pages/goodsPublish/goodsPublish"
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/auctionRecord/auctionRecord"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/myOrder/myOrder"
						})
						break;
					case 7:
						uni.navigateTo({
							url: "/pages/preserveMoney/preserveMoney"
						})
						break;
					case 6:
						uni.navigateTo({
							url: "/pages/aboutUs/aboutUs"
						})
						break;
					case 5:
						uni.navigateTo({
							url: "/pages/addrManage/addrManage"
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pages/wishGoods/wishGoods"
						})
						break;
					case 8:
						uni.navigateTo({
							url: "/pages/footprints/footprints"
						})
						break;
					case 9:
						uni.navigateTo({
							url: "/pages/noticeCenter/noticeCenter"
						})
						break;
					case 10:
						this.checkEnZh();
						break;
				}
			},
			checkEnZh() {
				// console.log(this.enzh);
				if(this.$i18n.locale == "zh") {
					this.$i18n.locale = "en";
					uni.setStorage({
						"key": "language",
						"data": "en"
					})
					this.initStatus();
					this.tabBarChangeLang();
					return
				}
				
				if(this.$i18n.locale == "en") {
					this.$i18n.locale = "zh";
					uni.setStorage({
						"key": "language",
						"data": "zh"
					})
					this.initStatus();
					this.tabBarChangeLang();
					return
				}
			},
			tabBarChangeLang: function() {
				uni.setTabBarItem({
					index: 0,
					text: this.$t('tabbar.home')
				})
				
				uni.setTabBarItem({
					index: 1,
					text: this.$t('tabbar.cart')
				})
				// uni.setTabBarItem({
				// 	index:2,
				// 	text: this.$t('tabbar.Sellidle')
				// })
				uni.setTabBarItem({
					index: 2,
					text: this.$t('tabbar.news')
				})
				uni.setTabBarItem({
					index: 3,
					text: this.$t('tabbar.my')
				})
			},
			async isLogin() {
				// const token = uni.getStorageSync("token")
				// if (!token) {
				// 	uni.navigateTo({
				// 		url: "/pages/login/login"
				// 	})
				// }
				
				this.userId = uni.getStorageSync("userId")
				if(!this.userId) {
					const res = await getUserId();
					if(res.code === 200) {
						// console.log(res.id);
					
						this.userId = res.id;
						uni.setStorageSync("userId", res.id)
					}
				
				}
				
				this.userInfo = uni.getStorageSync("userInfo");
				if(!this.userInfo) {
					const res = await getUserInfo();
					if(res.code === 200) {
						this.userInfo = res.data;
					
						uni.setStorageSync("userInfo", res.data)
					}
				}
			},
			async initData() {
				const res = await getRecord({
					pageSize: 1000
				});
				if(res.code === 200) {
					
					this.auctionNum = res.rows.length;
				}
			},
			async initNotice() {
				const res = await getInform({
					userId: uni.getStorageSync("userId"),
					pageSize: 1000
				});
				
				console.log(res);
				if(res.code == 200) {
					this.noticeNum = res.rows.filter(item => item.informStatus == 1).length;
				
					if(this.noticeNum > 0) {
						uni.setTabBarItem({
							index: 4,
							text: this.$t('tabbar.my'),
							iconPath: "../../static/icon/image_124.png",
							selectedIconPath: "../../static/icon/image_123.png"
						})
					} else {
						uni.setTabBarItem({
							index: 4,
							text: this.$t('tabbar.my'),
							iconPath: "../../static/icon/image_83.png",
							selectedIconPath: "../../static/icon/image_82.png"
						})
					}
				}
			},
			initStatus() {
				this.userFunctionList = [
					{
						id: 1,
						name: this.$t("my.auctionsRecord"),
						imgUrl: "../../static/icon/image_54.png"
					},
					{
						id: 2,
						name: this.$t("my.productReleaseList"),
						imgUrl: "../../static/icon/image_55.png"
					},
					{
						id: 3,
						name: this.$t("my.myOrder"),
						imgUrl: "../../static/icon/image_56.png"
					},
					{
						id: 4,
						name: this.$t("my.wishList"),
						imgUrl: "../../static/icon/image_57.png"
					},
					{
						id: 5,
						name: this.$t("my.addressManagement"),
						imgUrl: "../../static/icon/image_73.png"
					},
					{
						id: 8,
						name: this.$t("home.footPrint"),
						imgUrl: "../../static/icon/image_35.png"
					},
					{
						id: 9,
						name: this.$t("my.notice"),
						imgUrl: "../../static/icon/image_121.png"
					},
					{
						id: 10,
						name: this.$t("my.checkZhEn"),
						imgUrl: "../../static/icon/image_122.png"
					},
					{
						id: 6,
						name: this.$t("my.aboutUs"),
						imgUrl: "../../static/icon/image_58.png"
					},
					{
						id: 7,
						name: this.$t("my.collectionInformationMaintenance"),
						imgUrl: "../../static/icon/image_59.png"
					}
				]
			},
		},
		// created() {
		// 	// 判断是否登录 
		// 	// console.log(456);
		// 	this.isLogin();
		// 	// console.log(this.$t("my.auctionsRecord"));
		// },
		// onLoad() { 
		// 	// 判断是否登录
		// 	// console.log(123);
		// 	this.isLogin();
		// },
		onShow() {
			this.initStatus();
			this.isLogin();
			this.initData();
			this.initNotice();
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("my.title")});
		}
	}
</script>

<style lang="scss" scoped>
	page { 
		width: 100%;
		height: 100%;
		background-color: #FBFBFB;
	}
	
	.my-view {
		height: 100%;
	}
	
	// 顶部样式
	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// flex-direction: ;
		// justify-content: space-evenly;
		height: 236rpx;
		background-color: #fff;
		
		.user-picture {
			width: 152rpx;
			height: 152rpx;
			box-shadow: 2rpx 2rpx 16rpx 0rpx #00000019;
			margin-left: 50rpx;
			border-radius: 50%;
		}
		
		.user-name-id {
			margin-left: 40rpx;
			
			.user-name {
				color: #000000;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				line-height: 40rpx;
				letter-spacing: 0rpx;
				text-align: left;
				width: 400rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			
			.user-id {
				margin-top: 72rpx;
				color: #858585;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 30rpx;
				line-height: 40rpx;
				letter-spacing: 0rpx;
				text-align: left;
			}
		}
		
		.entrance {
			// flex: 1;
			width: 45rpx;
			height: 45rpx;
			margin-right: 64rpx;
		}
	}
	
	.user-function {
		margin: 0 30rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #0000000C;
		overflow: hidden;
		margin-bottom: 200rpx;
		
		.user-specFunction {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-bottom: 2rpx solid #E8E8E8;
		}
		
		.user-specFunction:last-child {
			border-bottom: none;
		}
	}

	.user-specFunction-inform {
		width: 66rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		border-radius: 20rpx;
		background: #FF0000;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 20rpx;
		letter-spacing: 0rpx;
	}
	
	.user-specFunction-icon {
		width: 38rpx;
		height: 38rpx;
		margin-right: 34rpx;
	}
	
	.user-specFunction-entrance {
		width: 45rpx;
		height: 45rpx;
		margin-left: 34rpx;
	}
	
	.user-specFunction-right {
		display: flex;
		align-items: center;
		margin-right: 34rpx;
	}
	
	.user-specFunction-left {
		display: flex;
		align-items: center;
		margin-left: 34rpx;
		color: #000000;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		letter-spacing: 0rpx;
		text-align: left;
	}
</style>
